<div class="c-chrome">
    <div class="saturation-wrap">
      <saturation :colors.sync="colors" :on-change="childChange"></saturation>
    </div>
    <div class="chrome-body">
      <div class="controls">
        <div class="color-wrap">
          <div class="active-color" :style="{background: activeColor}"></div>
        </div>

        <div class="sliders">
          <div class="hue-wrap">
            <hue :colors.sync="colors" :on-change="childChange"></hue>  
          </div>
          <div class="alpha-wrap">
            <alpha :colors.sync="colors" :on-change="childChange"></alpha>
          </div>
        </div>
      </div>
      
      <div class="fields-wrap">
        <div class="fields" v-show="fieldsIndex === 0">
          <!-- hex -->
          <div class="field">
            <ed-in label="hex"
            :val.sync="colors.hex"
            :on-change="inputChange"></ed-in>  
          </div>
        </div>
        <div class="fields" v-show="fieldsIndex === 1">
          <!-- rgba -->
          <div class="field">
            <ed-in label="r" :val.sync="colors.rgba.r" 
            :on-change="inputChange"></ed-in>
          </div>
          <div class="field">
            <ed-in label="g" :val.sync="colors.rgba.g" 
            :on-change="inputChange"></ed-in>
          </div>
          <div class="field">
            <ed-in label="b" :val.sync="colors.rgba.b"
            :on-change="inputChange"></ed-in>
          </div>
          <div class="field">
            <ed-in label="a" :val.sync="colors.a" :arrow-offset="0.01" :max="1"
            :on-change="inputChange"></ed-in>
          </div>
        </div>
        <div class="fields" v-show="fieldsIndex === 2">
          <!-- hsla -->
          <div class="field">
            <ed-in label="h" :val.sync="colors.hsl.h" 
            :on-change="inputChange"></ed-in>
          </div>
          <div class="field"> 
            <ed-in label="s" :val.sync="colors.hsl.s"
            :on-change="inputChange"></ed-in>
          </div>
          <div class="field">
            <ed-in label="l" :val.sync="colors.hsl.l"
            :on-change="inputChange"></ed-in>
          </div>
          <div class="field">
            <ed-in label="a" :val.sync="colors.a" :arrow-offset="0.01" :max="1"
            :on-change="inputChange"></ed-in>
          </div>
        </div>
        <!-- btn -->
        <div class="toggle-btn">
          <div class="icon" @click="toggleViews">
            <svg style="width:24px; height:24px" viewBox="0 0 24 24" 
              @mouseover="showHighlight" 
              @mouseenter="showHighlight" 
              @mouseout="hideHighlight">
              <path fill="#333" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" />
            </svg>
          </div>
          <div class="icon-highlight" v-show="highlight"></div>
        </div>
        <!-- btn -->
      </div>      
    </div>
</div>